.dashboard {
  .ant-table-wrapper {
    padding: 0 10px 10px;
  }
}

.dashboard-detail-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 20px 10px;

  &-left {
    display: flex;
    align-items: center;

    .back_icon {
      font-size: 14px;

      &:hover {
        color: @primary-color;
      }
    }

    .title {
      font-size: 14px;
      color: black;
      font-weight: bold;
    }

    .edit {
      font-size: @baseFontSizeMiddle;
      width: 20px;
      height: 20px;
      margin-left: 15px;
    }
  }

  &-right {
    display: flex;
    height: 32px;

    &>button {
      margin-right: 10px;
    }
  }
}

.dashboard-detail-container {
  padding: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  position: relative;
}

.dashboard-detail-loading {
  background-color: unset !important; // 覆盖 pageLayout 上面约定的样式
  position: absolute !important;
  top: 50%;
  left: 50%;
}

.dashboard-detail-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--fc-fill-1) !important; // 覆盖 pageLayout 上面约定的样式
  box-shadow: unset !important;
  overflow: auto;
  overflow-x: hidden;

  .variable-area {
    display: flex;
    width: 100%;

    .date-picker-area {
      display: flex;
      width: 400px;
      height: 32px;
      flex-shrink: 0;
    }
  }

  .dashboard-detail-content-header-container {
    background-color: var(--fc-fill-2);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fc-border-color);
  }

  .ant-affix {
    .dashboard-detail-content-header-container {
      box-shadow: 0 4px 4px rgba(0, 0, 0, .12);
    }
  }

  .dashboard-detail-content-header-container {
    .ant-alert {
      padding: 4px 8px;
    }
  }

  .dashboard-detail-content-header {
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    background-color: unset !important;
  }

  .dashboards-panels {
    flex: 1;
    background-color: unset !important;

    .ant-tooltip-inner {
      a {
        color: #fff;
        text-decoration: underline
      }
    }
  }

  .charts {
    padding: 0px 20px 15px;

    .ant-collapse {
      margin-bottom: 15px;
    }

    .ant-collapse-header {
      font-size: @baseFontSizeTiny;
      height: 40px;
    }

    .ant-collapse-extra {
      margin-top: -3px;

      button {
        font-size: @baseFontSizeTiny;
      }
    }

    .ant-collapse-content-box {
      display: flex;
      padding: 2px;

      .empty-group-holder {
        flex: 1;
        text-align: center;
      }
    }
  }

  .react-grid-item>.react-resizable-handle::after {
    border-right: 2px solid #E3E4E6;
    border-bottom: 2px solid #E3E4E6;
  }

  .scroll-container {
    .ant-table-scroll-horizontal {
      .ant-table-body::-webkit-scrollbar {
        height: 4px;
        width: 4px;
      }

      .ant-table-body::-webkit-scrollbar-corner {
        background-color: transparent;
      }

      .ant-table-body::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.5);
        ;
      }

      .ant-table-body::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: unset;
      }
    }
  }

  .scroll-container::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }

  .scroll-container::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  .scroll-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ccc;
  }

  .scroll-container::-webkit-scrollbar-track {
    border-radius: 10px;
    background: unset;
  }
}